import React, { FC, useEffect, useRef } from 'react'
import { Button, Tabs } from 'antd'
import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table'
import { Link } from 'react-router-dom'
import { TaskInfoDTO } from '@/model/release/TaskInfoDTO'
import { taskPage } from '@/api/release/task'
import { useStore } from '@/store'

const { TabPane } = Tabs

const Task: FC = () => {
  const actionRef = useRef<ActionType>()
  const { userStore, appStore } = useStore()

  useEffect(() => {
    appStore.setHeaderHide(false)
    appStore.setSliderHide(false)
  }, [appStore])
  const columns: ProColumns<TaskInfoDTO>[] = [
    {
      title: '任务名称',
      dataIndex: 'name',
    },
    {
      title: '计划发布时间',
      dataIndex: 'planReleaseDate',
    },
    {
      title: '创建人',
      dataIndex: 'createUserName',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      dataIndex: '',
      key: 'x',
      render: (text, record) => [
        <Button type="link" key={record.id}>
          <Link to={`/release/taskDetail/${record.id}`}>查看详情</Link>
        </Button>,
      ],
    },
  ]
  return (
    <div className="task">
      <Tabs defaultActiveKey="1" tabBarGutter={40}>
        <TabPane tab="我的发布" key="1">
          <ProTable<TaskInfoDTO>
            columns={columns}
            actionRef={actionRef}
            request={async (params = {}) => {
              const newParams = {
                ...params,
                userId: userStore.userInfo.id,
              }
              const data = await taskPage(newParams)
              return {
                data: data.records,
                success: true,
                total: data.total,
              }
            }}
            columnsState={{
              persistenceKey: 'pro-table-server',
              persistenceType: 'localStorage',
            }}
            search={false}
            options={false}
            rowKey="id"
            pagination={{
              pageSize: 10,
            }}
            dateFormatter="string"
          />
        </TabPane>
        <TabPane tab="我的应用" key="2">
          我的应用
        </TabPane>
      </Tabs>
    </div>
  )
}

export default Task
